<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../common/cropper/cropper.css?01_38" />
		<!--公共js-->
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>

		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>

		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		<script type="text/javascript" src="../common/cropper/cropper.js?01_38"></script>
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/my_common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>

		<style>
			.wrap_body {
				min-height: 100%;
			}
		</style>
	</head>

	<body>
		<header class="pr bg-red9 fff f-20 pad-t-10 pad-b-10  pad-r-10">
			<div onclick="app_back()" class="pa back pad-l-10">
				<a></a>
			</div>
			<div class="center" data-l="1074"></div>
		</header>
		<!--<img src="../images/back.png" id="qwert" style="width: 100px; height: 100px;"  style="display: none;" />-->
		<div id="app" class="wrap_body account_setting" v-cloak>
			<div class="text f-15">
				<div class="item">
					<div class="bank5 bg-grayF5"></div>
					<div class="p fiex pad-l-10 pad-r-10 bg-fff pad-t-20 pad-b-20">
						<div @click="cli">{{b_lg[1207]}}</div>
						<div class="fiex1 fr cf pr" style="height: 85px;">
							<img v-if="url!=''" id="image" :src="oss+url" class="icon fr" />
							<img v-else alt="上传头像" id="image" :src="con_img" class="icon fr" style="height: 100%;" />
							<input type="file" accept="image" class="inp_file pa" @change="upphoto($event,1)" @click="android_upphoto($event,1)" />
						</div>
					</div>
				</div>
				<div class="item" onclick="clicked('../login/changeName.html')">
					<div class="bank5 bg-grayE9"></div>
					<div class="p fiex pad-l-10 pad-r-10 bg-fff">
						<div>{{b_lg[1020]}}</div>
						<div class="fiex1"><input disabled="disabled" type="text" value="" name="" id="" v-model="my_msg.nickname" class="inp pad-t-25 pad-b-25" :placeholder="b_lg[1127]" /></div>
						<div class="change bk fr"></div>
					</div>
				</div>
				<!--<div onclick="ccccc()">刷新</div>-->
				<div class="item">
					<div class="bank5 bg-grayE9"></div>
					<div class="p fiex pad-l-10 pad-r-10 bg-fff">
						<div>{{b_lg[1021]}}</div>
						<div class="fiex1"><input type="text" name="" id="" v-model="my_msg.username" class="inp pad-t-25 pad-b-25" :placeholder="b_lg[1003]" disabled="disabled" /></div>
					</div>
				</div>

				<div style="display: none;" class="item">
					<div class="bank5 bg-grayE9"></div>
					<div class="p fiex pad-l-10 pad-r-10 bg-fff">
						<div>{{b_lg[1022]}}</div>
						<div class="fiex1"><input type="text" name="" id="" value="" class="pad-t-25 pad-b-25 inp" :placeholder="b_lg[1128]" /></div>
					</div>
				</div>

				<div @click="pag_j('../login/changePassword.html')" class="item">
					<div class="bank5 bg-grayE9"></div>
					<div class="p  pad-l-10 pad-r-10 bg-fff pad-t-25 pad-b-25 cf">
						<div style="display: inline-block;">{{b_lg[1015]}}</div>
						<div class="change bk fr mag-t-5"></div>
					</div>
				</div>

				<div class="bank5 bg-grayE9"></div>
				<!--<div class="mag-t-25 center">
					<a href="javascript:;" @click="sub_for" class="bg-red9 pad-l-65 pad-r-65 pad-t-15 pad-b-15 fff btn">{{b_lg[1270]}}</a>
				</div>-->
			</div>

			<!-- 遮罩层 -->
			<div class="mui-backdrop" v-show="panel">
				<div class="container_tit">{{b_lg[1208]}}</div>
				<div class="min-cropper" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;">
					<img id="image1" :src="url1" alt="Picture">
				</div>
				<div style="position: absolute; bottom: 20px; width: 100%;" class="container_footer fiex center">
					<div class="fiex1">
						<a href="javascript:;" class="bon-white2" @click="close1">{{b_lg[1049]}}</a>
					</div>
					<div class="fiex1">
						<a href="javascript:;" class="bon-yellow" @click="crop">{{b_lg[1190]}}</a>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function ccccc() {
				window.location.href = "accountSetting.html?" + Math.random();
			}

			//再对图片进行压缩为270*270，再上传到服务器
			var resizeImage_2 = function(src, option, call) {
				var func = func;
				var files = [];
				if(typeof src == "string") src = [src];
				//if()
				var compressImage = function(num) {
					var path = src[num];
					var date = new Date();
					var num1 = Math.round(Math.random() * 100 + 1);
					num1 = date.getTime() + String(num1);
					var option1 = {
						src: path,
						dst: '_doc/' + num1 + '.jpg',
						overwrite: true,
						width: '800px',
						format: 'jpg',
						quality: 75 //图片质量不再修改，以免失真
					}
					for(var i in option) { //改变属性
						option1[i] = option[i];
					}

					plus.zip.compressImage(option1,
						function(e) {
							plus.nativeUI.closeWaiting();
							files.push(e.target);
							if(num == src.length - 1) {
								call(files); //全部压缩完成回调
							} else {
								compressImage(num + 1);
							}
						},
						function(err) {
							plus.nativeUI.alert('未知错误！', function() {
								//back();
							});
						}
					);
				}
				compressImage(0);
			}

			function refresh() {
				app.load()
			}
			var app = null

			function app_back() {
				app.back()
			}

			function fun1() {
				setlange_obj(); //加载头部语言包
				app = new Vue({
					el: '#app',
					data: {
						my_msg: {},
						url: con_img, //默认图片
						url1: "",
						url2: '',
						headerImage: '',
						picValue: '',
						panel: false,
						cropper: '',
						upimg_area: [(1 / 1), 300, 300], //上传图片尺寸 0：比例，1：宽，2：高
						headimgurl: "", //图片id
						nickname: "",
						b_lg: global_lange, //语言包
						clock_v: false
					},
					mounted: function() {
						this.load()
						var self = this;
						var image = document.getElementById('image1');
						this.cropper = new Cropper(image, {
							aspectRatio: this.upimg_area[0],
							viewMode: 1,
							background: false,
							zoomable: true,
							dragMode: "move",
							dragCrop: false,
							resizable: false,
							cropBoxResizable: false,
							cropBoxMovable: false,
							ready: function() {
								self.croppable = true;
							}
						});
					},
					methods: {
						sub_for: function() {
							if(app.my_msg.nickname != "") { //判断昵称是否为空
								var formData = {}; //提交的信息
								formData.nickname = app.my_msg.nickname;
								formData.headimgurl = app.headerImage;
								common_ajax("1", formData, "put_update_member_info", function(h) { //提交成功后内容处理
									if(h.status == "1") {
										//将返回的头像 昵称重新写入缓存
										app.my_msg.headimgurl_path = h.result.info.headimgurl_path;
										app.my_msg.nickname = h.result.info.nickname;
										app.my_msg.headimgurl = h.result.info.headimgurl;
										setItem("my_msg", JSON.stringify(app.my_msg));
										console.log(app.my_msg)

										if(isAPP) { //提交信息成功后将父级的信息进行刷新
											var preUrl = plus.webview.currentWebview().opener();
											preUrl.evalJS('refresh()');
										}
										mui.toast(h.msg);
									} else {
										mui.toast(h.msg);
									}
								})
							} else {
								mui.toast(app.b_lg[1157]);
							}
						},
						android_upphoto: function(e, i) {
							var $th = this,
								i = i;
							if(isAPP && isAndroid) {
								e.stopPropagation();
								e.preventDefault();
								var btnArray = [{
									title: global_lange['1534']
								}, {
									title: global_lange['1533']
								}];
								plus.nativeUI.actionSheet({
									cancel: global_lange['1535'],
									buttons: btnArray
								}, function(e) {
									var index = e.index;
									switch(index) {
										case 0:
											break;
										case 1:
											var cmr = plus.camera.getCamera();
											cmr.captureImage(function(p) {

												//图片压缩
												resizeImage_2(p, {}, function(files) {
													var fils1 = files[0].split("/doc/")
													//console.log(files[0])
													//console.log('http://localhost:13131/_doc/'+fils1[1])
													var src2 = 'http://localhost:13131/_doc/' + fils1[1]
													$("#qwert").attr("src", src2)

													app.inputIndex = i;
													app.panel = true;
													app.url1 = src2
													app.cropper.replace(app.url1);
												})
											}, function(e) {
												mui.alert('失败：' + e.message);
											}, {
												filename: '_doc/',
												index: 1
											});
											break;
										case 2:
//											alert(123123)
											plus.gallery.pick(function(path) {
												//console.log(path);
												//var path=[path]
												if(app.cropper) {

													//图片压缩
													resizeImage_2(path, {}, function(files) {
														var fils1 = files[0].split("/doc/")
														//console.log('http://localhost:13131/_doc/'+fils1[1])
														var src2 = 'http://localhost:13131/_doc/' + fils1[1]
														$("#qwert").attr("src", src2)

														app.inputIndex = i;
														app.panel = true;
														app.url1 = src2
														app.cropper.replace(app.url1);
													})
												}
											}, function(e) {
												console.log('取消选择图片');
											}, {
												filter: 'image'
											});
											break;
									}

								});
							}
						},

						cli: function() {
							var files = $('#file').prop('files');
							var reader = new FileReader(); //新建一个FileReader
							reader.readAsText(files[0], "UTF-8"); //读取文件 
							reader.onload = function(evt) { //读取完文件之后会回来这里
								var fileString = evt.target.result;
							}
						},
						upphoto: function(e) { //上传照片
							//重新设置图片比例
							this.upimg_area = [1, 200, 200]
							this.cropper.setAspectRatio(this.upimg_area[0])
							var files = e.target.files || e.dataTransfer.files;
							if(!files.length) return;
							this.panel = true;
							this.picValue = files[0];
							this.url1 = this.getObjectURL(this.picValue);
							//每次替换图片要重新得到新的url  
							if(this.cropper) {
								this.cropper.replace(this.url1);
							}
							this.panel = true;
						},
						crop: function() { //确定裁剪
							this.panel = false;
							var croppedCanvas;
							var roundedCanvas;
							if(!this.croppable) {
								return;
							}
							// Crop  
							croppedCanvas = this.cropper.getCroppedCanvas();
							console.log("croppedCanvas", croppedCanvas)
							// Round  
							roundedCanvas = this.getRoundedCanvas(croppedCanvas);
							this.url2 = roundedCanvas.toDataURL("image/jpeg", 0.5);
							console.log("this.url2", this.url2)
							this.sub_img();
						},
						close1: function() {
							//取消裁剪
							this.panel = false;
							$("input[type=file]").val("")
						},
						getRoundedCanvas: function(sourceCanvas) {
							var canvas = document.createElement('canvas');
							var context = canvas.getContext('2d');
							var width = this.upimg_area[1];
							var height = this.upimg_area[2];
							canvas.width = width;
							canvas.height = height;
							context.imageSmoothingEnabled = true;
							context.drawImage(sourceCanvas, 0, 0, width, height);
							context.globalCompositeOperation = 'destination-in';
							context.beginPath();
							context.fill();
							return canvas;
						},
						getObjectURL: function(file) {
							var url = null;
							if(window.createObjectURL != undefined) { // basic  
								url = window.createObjectURL(file);
							} else if(window.URL != undefined) { // mozilla(firefox)  
								url = window.URL.createObjectURL(file);
							} else if(window.webkitURL != undefined) { // webkit or chrome  
								url = window.webkitURL.createObjectURL(file);
							}
							return url;
						},
						sub_img: function() {
							var formData = new FormData();
							formData.append("file", dataURItoBlob(app.url2), "image.jpg");
							common_ajax("4", formData, "uploadImg", function(h) {
								if(h.status == "1") { //图片上传成功返回 图片id 以及路径 这里修改缓存不在请求接口
									app.headerImage = h.result.thumb;
									app.url = h.result.thumb_path;
									app.sub_for()
								} else {
									mui.toast(h.msg);
								}
							});
						},
						pag_j: function(h) { //页面跳转
							jum(h);
						},
						back: function() {
							if(isAPP) {
								var preUrl = plus.webview.currentWebview().opener();
								preUrl.evalJS('admin_btn()');
							}
							setTimeout(function() {
								back()
							}, 400)

						},
						load: function() {
							//从缓存中读取个人信息
							this.my_msg = JSON.parse(getItem("my_msg"));
							//写入头像 oos 图片路径国内外
							this.url = this.my_msg.headimgurl_path;
							this.headerImage = this.my_msg.headimgurl;
						}
					}
				})
			}
		</script>
	</body>

</html>
